<template>
  <view class="result-wrap">
    <!-- 如果是舌诊，显示舌诊结果页 -->
    <tongue-results-page v-if="source === 'tongue'" :result-data="analysisResult" @restart="restart" />
    <!-- 如果是面诊，显示面诊结果页 -->
    <face-results-page v-else-if="source === 'face'" :result-data="analysisResult" @restart="restart" />
    <!-- 否则，显示原来的穴位识别结果页 -->
    <results-page
      v-else-if="source === 'acupoint'"
      :photo-path="analysisResult.picUrl"
      :acupoint-list="analysisResult.acupointList"
      :link-to="analysisResult.linkTo"
      :show-restart="false"
    />

    <!-- 可以加一个加载中的状态 -->
    <view v-else>
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
import ResultsPage from "@/pages/zhen/ResultsPage.vue";
import TongueResultsPage from "@/pages/zhen/TongueResultsPage.vue";
import FaceResultsPage from "@/pages/zhen/FaceResultsPage.vue";
import { useUserStore } from "@/store/user.js";
// 确保 API 函数已正确导入
import { getResult, getTongueResult, getFinalFaceResult } from "@/api/acupoint.js";

export default {
  // 1. 注册引入的组件
  components: {
    ResultsPage,
    TongueResultsPage,
    FaceResultsPage,
  },
  data() {
    return {
      // source: 'acupoint', 'tongue', 'face'
      source: "",
      // 增加一个 loading 状态，提升用户体验
      isLoading: true,
      // 分析结果，初始化为空对象
      analysisResult: {},
    };
  },
  computed: {
    userStore() {
      return useUserStore();
    },
    userInfo() {
      return this.userStore.userInfo;
    },
  },
  onLoad(options) {
    this.setTitle();
    // options 对象通常包含 source 和一个唯一标识符，如 id
    // 例如： { source: 'tongue', appointNo: '12345' }
    if (!options.source || !options.id) {
      uni.showToast({
        title: "参数错误",
        icon: "error",
      });
      // 参数错误，直接返回上一页
      setTimeout(() => uni.navigateBack(), 1500);
      return;
    }

    this.source = options.source;
    // 2. 在 onLoad 中调用方法获取数据
    this.getDetail(options.id);
  },

  methods: {
    setTitle() {
      // 国际化页面标题
      if (this.$t) {
        uni.setNavigationBarTitle({
          title: this.$t('acupoint.detail_title')
        })
      }
    },
    // 3. 实现 getDetail 方法
    async getDetail(id) {
      this.isLoading = true;
      try {
        let res = null;
        // 根据 source 调用不同的 API
        switch (this.source) {
          case "acupoint":
            res = await getResult(id);
            break;
          case "tongue":
            res = await getTongueResult(id);
            break;
          case "face":
            res = await getFinalFaceResult(id);
            break;
          default:
            // 如果 source 值不匹配，给出提示
            uni.showToast({ title: "未知的分析类型", icon: "none" });
            return;
        }

        // 假设 API 成功返回的数据在 res.data 或直接就是 res
        // 请根据你的实际 API 返回结构调整
        if (res && res.code === 200) {
          if (this.source === "acupoint") {
            const resultsData = res.result;
            // 3. 将结果存入 state, 准备传递给子组件

            this.analysisResult = {
              picUrl: resultsData.pic_url,
              acupointList: resultsData.acupointList.map((point) => ({
                ...point,
                xaxis: Number(point.x_axis),
                yaxis: Number(point.y_axis),
              })),

              linkTo: {
                shoppingMallAppId: resultsData.shoppingMallAppId,
                shoppingMallUrl: resultsData.shoppingMallUrl,
              },
            };
          } else {
            this.analysisResult = {
              ...res.result,
              userInfo: this.userInfo,
            };
          }
        } else {
          // API 返回了错误码
          uni.showToast({ title: res.message || "获取结果失败", icon: "none" });
        }
      } catch (error) {
        // 网络请求等异常处理
        console.error("getDetail error:", error);
        uni.showToast({
          title: "网络开小差了，请稍后重试",
          icon: "none",
        });
      } finally {
        this.isLoading = false;
      }
    },

    // 4. 实现 restart 方法
    restart() {
      // "再试一次" 通常是返回到拍照或上传页面
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.result-wrap {
  /* 你可以在这里添加一些通用样式，比如背景色 */
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}
</style>
